<template>
  <div>
    <el-card class="user-save-card">
      <div slot="header" class="clearfix">
        <h1 class="user-save-title">更新用户数据</h1>
      </div>
      <div>
        <el-form
          :model="user"
          :rules="rules"
          ref="user"
          label-width="80px"
          class="demo-ruleForm"
          status-icon
          
        >
          <el-form-item label="用户名" prop="username" >
            <el-input v-model="user.username" disabled></el-input>
          </el-form-item>
          <el-form-item label="昵称" prop="nickname">
            <el-input v-model="user.nickname"></el-input>
          </el-form-item>
          <el-form-item label="密码" prop="password">
            <el-input
              type="password"
              v-model="user.password"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item label="确认密码" prop="rePassword">
            <el-input
              type="password"
              v-model="user.rePassword"
              autocomplete="off"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('user')" class="update-user"
              >更新用户</el-button
            >
            <router-link to="/user"
              ><el-button> 返回首页</el-button></router-link
            >
          </el-form-item>
        </el-form>
      </div>
    </el-card>
  </div>
</template>

<script>
import { reqGetUpdateUsers,reqUpdateUser } from "../api/users";
export default {
  name: "UserUpdate",
  data() {
    return {
      user: {
        id:'',
        username:"",
        nickname: "",
        password: "",
      },
      rules: {
        nickname: [
          { required: true, message: "请输入昵称", trigger: "blur" },
          { min: 2, max: 6, message: "长度在 2 到 6 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, validator: this.validatePass, trigger: "blur" },
        ],
        rePassword: [
          { required: true, validator: this.validatePass2,  trigger: "blur"},
        ],
      },
    };
  },
  methods: {
    validatePass(rule, value, callback) {
      if (value === "") {
        callback(new Error("请输入密码"));
      } else {
        if (this.user.rePassword !== "") {
          this.$refs.user.validateField("rePassword");
        }
        callback();
      }
    },
    validatePass2(rule, value, callback) {
      if (value === "") {
        callback(new Error("请再次输入密码"));
      } else if (value && value !== this.user.password) {
        callback(new Error("两次输入密码不一致!"));
      } else {
        callback();
      }
    },
    submitForm(user) {
      this.$refs[user].validate(async (valid) => {
        if (valid) {
          try {
             await reqUpdateUser({
              id:this.user.id,
              nickname:this.user.nickname,
              password:this.user.password
            })
            this.$router.history.push("/user");
            this.$message({
              message: "更新用户数据成功~~",
              type: "success",
            });
          } catch (e) {
            this.$message.error(e);
            return false;
          }
        } else {
          this.$message.error("请输入正确的用户信息");
          return false;
        }
      });
    },
  },
  async mounted(){
    const res =await reqGetUpdateUsers(this.$route.params.id)
    const {username,nickname,id} = res.data
    this.user.id = id
    this.user.username = username
    this.user.nickname = nickname
  }
};
</script>

<style  scoped>
.demo-ruleForm {
  width: 350px;
}
.update-user {
  margin-right: 10px;
}
</style>
